<template>
  <div class="foreign">
    <div v-for="(item, index) in curingData" :key="index" @click="goRouter(item)">
      <div class="for-img">
        <img :src="item.img" alt />
      </div>
      <div class="for-font">
        <div class="for-title">{{item.name}}</div>
        <div class="for-btn">{{item.type}}</div>
        <div
          class="for-text"
        >{{item.summary}}</div>
      </div>
    </div>
  </div>
</template>

<script>
import { detailsAddViews } from "@/api/home/api";
export default {
  props:['curingData'],
  methods: {
    goRouter({ id }) {
      detailsAddViews({ id,type:2 }).then(res => {
        let data = res.data;
        let details=JSON.stringify(data.dataList[0])
        this. $router.push({ path: '/home/news/other',query: { details } })
      });
    }
  }
};
</script>

<style scoped>
.foreign {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
}
.foreign > div {
  cursor: pointer;
  background: #f8f8f8;
  width: 48%;
  display: flex;
  box-sizing: border-box;
  padding: 10px;
  margin-bottom: 36px;
}
.foreign > div:nth-child(odd) {
  margin-right: 2%;
}
.foreign > div:nth-child(even) {
  margin-left: 2%;
}
.for-img {
  width: 50%;
}
.for-img img {
  width: 100%;
  height: 100%;
}
.for-font {
  width: 50%;
  margin-left: 10px;
}
.for-title {
  color: #413d32;
  font-size: 14px;
  margin-top: 6px;
  font-weight: bold;
}
.for-title:hover {
  color: #0dbd95;
}
.for-btn {
  width: 50px;
  color: #fff;
  background: #0dbd95;
  font-size: 12px;
  border-radius: 3px;
  height: 21px;
  line-height: 21px;
  padding: 0 6px;
  margin-bottom: 8px;
  margin-top: 8px;
}
.for-text {
  color: #aaa;
  font-size: 12px;
  line-height: 24px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.for-text:hover {
  color: #000;
}
/* 鼠标上移特效 */
.foreign > div {
  background: #f8f8f8;
 
  vertical-align: middle;
  transform: translateY(0);
  transition: all 0.25s;
}
.foreign > div:hover,
.foreign > div:focus,
.foreign > div:active {
  transform: translateY(-2px);
  box-shadow: 3px 8px 10px rgb(10 10 10 / 6%);
}
</style>
